<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 50%;
            height: 100vh;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }


        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        body>div {
            margin: 5px;
            background-color: black;
            color: red;
        }

        .div1 {
            height: 150px;
            width: 150px;
        }

        .div2 {
            box-sizing: border-box;
            border: red 1px solid;
            height: 80%;
            width: 80%;
        }

        .div3 {
            height: 200px;
            width: 200px;
        }

        .div3>div {
            box-sizing: border-box;
            border: red 1px solid;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="div1">
        150px*150px(像素)
        <hr>
        不同显示器像素大小不同，因此显示出来的效果不同
    </div>
    <div class="div1">
        <div class="div2">80%*80%
            <hr>
            根据父元素的大小按百分比取值
        </div>
    </div>
    <div class="div3">
        <div style="height: 5em;width: 5em;">
            5em*5em
            <hr>
        </div>
        1em=1font-size,字体大小可自己设定,此样例为15px;单位em常用于字体相关样式的设计
    </div>
    <div class="div3">
        <div style="height: 5rem;width: 5rem;">
            5rem*5rem
            <hr>
        </div>
        类似于em，root em，参照的是html标签的字体大小
    </div>
</body>

</html>